<template>
  <div class="jaguar-view">
    <div class="jaguar-search">
      <el-form :inline="true" :model="searchForm" @submit.prevent>
        <search-input
          label="类全名"
          v-model="searchForm.className"
          :search="getData"
        />
        <search-input
          label="记录ID"
          v-model="searchForm.recordId"
          :search="getData"
        />
        <search-input
          label="字段名称"
          v-model="searchForm.fieldName"
          :search="getData"
        />
        <search-input
          label="更新人用户名"
          v-model="searchForm.modifyUserName"
          :search="getData"
        />
        <el-form-item label="操作时间">
          <DatePicker
            v-model="searchForm.modifyTime"
            showTime
            showSeconds
            selectionMode="range"
            hideOnRangeSelection
            showButtonBar
            style="width: 23rem"
            @hide="getData(1)"
          />
        </el-form-item>

        <el-form-item>
          <search-button :search="getData" />
          <reset-button :search-form="searchForm" :search="getData" />
        </el-form-item>
      </el-form>
    </div>

    <Card>
      <template #content>
        <DataTable :value="tableData" :loading="loading">
          <Column field="className" header="类全名/字段名称">
            <template #body="scope">
              <div>{{ scope.data.className }}</div>
              <div>{{ scope.data.fieldName }}</div>
            </template>
          </Column>

          <Column field="recordId" header="记录ID" />

          <Column field="oldValue" header="更新前的值">
            <template #body="scope">
              <span
                class="multi-line-ellipsis text-button"
                @click="handleView(scope.data)"
              >
                {{ scope.data.oldValue }}</span
              >
            </template>
          </Column>
          <Column field="newValue" header="更新后的值">
            <template #body="scope">
              <span
                class="multi-line-ellipsis text-button"
                @click="handleView(scope.data)"
                >{{ scope.data.newValue }}</span
              >
            </template>
          </Column>
          <Column field="lastModifyUserName" header="上次更新人/更新时间">
            <template #body="scope">
              <div>{{ scope.data.lastModifyUserName }}</div>
              <div>{{ scope.data.lastModifyTime }}</div>
            </template>
          </Column>
          <Column field="modifyUserName" header="本次更新人/更新时间">
            <template #body="scope">
              <div>{{ scope.data.modifyUserName }}</div>
              <div>{{ scope.data.modifyTime }}</div>
            </template>
          </Column>
        </DataTable>

        <table-page :page="page" :search="getData" />
      </template>
    </Card>

    <View :dialog="dialog" />
  </div>
</template>
<script>
import { fetchList } from '@/api/log/dataModifyLog'
import View from './View'
import moment from 'moment'

export default {
  name: 'DataModifyLog',
  data() {
    return {
      loading: false,
      tableData: [],
      searchForm: {},
      page: {
        total: 0,
        current: 1,
        size: 10,
      },
      dialog: {
        id: null,
        visible: false,
      },
    }
  },
  components: {
    View,
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData(current, size) {
      if (current) this.page.current = current
      if (size) this.page.size = size

      this.searchForm.modifyStartTime = null
      this.searchForm.modifyEndTime = null
      if (this.searchForm.modifyTime) {
        if (this.searchForm.modifyTime.length > 0) {
          this.searchForm.modifyStartTime = moment(
            this.searchForm.modifyTime[0]
          ).format('YYYY-MM-DD HH:mm:ss')
        }
        if (this.searchForm.modifyTime.length > 1) {
          this.searchForm.modifyEndTime = moment(
            this.searchForm.modifyTime[1]
          ).format('YYYY-MM-DD HH:mm:ss')
        }
      }

      this.loading = true
      fetchList(
        Object.assign(
          {
            'orders[0].asc': false,
            'orders[0].column': 'id_',
            current: this.page.current,
            size: this.page.size,
          },
          this.searchForm
        )
      )
        .then((res) => {
          this.tableData = res.data.data.records
          this.page.total = res.data.data.total
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleView(row) {
      this.dialog.id = row.id
      this.dialog.visible = true
    },
  },
}
</script>
